<template>
  <div>
    <!-- <div style="display: flex;flex-direction: column;width: 320px;">
      <h1 style="text-align: center;">食品主体分布情况</h1>
      <div v-for="(item, index) in chunList" :key="index" class="item">
        <h3 :style="{ color: index < 3 ? 'red' : 'black' }">
          TOP{{ index + 1 }}
        </h3>
        <span>{{ item.name }}</span>
        <span>{{ item.num }}</span>
      </div>
    </div> -->
    <div id="mapChart"></div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts"; //echarts 官网引入方法
import pingtan from "../../assets/pingtan.json";
import fuzhou from "../../assets/fuzhou.json";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "mapEchart",
  data() {
    return {
      chart: null,
      options: {},
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
      type: 0,
      chunList: [
        {
          name: "流水",
          num: 3480
        },
        {
          name: "平原",
          num: 3473
        },
        {
          name: "苏澳",
          num: 3440
        },
        {
          name: "东奥",
          num: 3434
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        visualMap: {
          min: 5555,
          max: 3333333,
          show: false,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"]
          }
        },
        title: {
          text: "平潭综合实验区",
          // text: "福州市地图",
          subtext: "食品流通主体数量"
        },
        //提示框组件
        tooltip: {
          show: true,
          //触发类型：数据项图形触发
          trigger: "item",
          padding: 10,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: {
            color: "#000000",
            fontSize: 12
          },
          //提示框内容格式器
          formatter: e => {
            // let data = e.data;
            // //此处将各等级景点数量表示为0-10内的随机整数
            // data.five = (Math.random() * 10) | 0;
            // data.four = (Math.random() * 10) | 0;
            // data.three = (Math.random() * 10) | 0;
            // data.two = (Math.random() * 10) | 0;
            // data.one = (Math.random() * 10) | 0;
            // //景点数量 - 五个等级之和
            // data.number =
            //   data.five + data.four + data.three + data.two + data.one;
            //字符串模板
            let data = {
              name: "食品流通主体数量",
              number: 350,
              five: 102,
              four: 100,
              three: 50,
              two: 148
            };
            let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>合计主体 : </span><span>${data.number}户</span></p>
                   <p><span>食品生产主体 : </span><span>${data.five}户</span></p>
                   <p><span>食品流通主体 : </span><span>${data.four}户</span></p>
                   <p><span>餐饮服务主体 : </span><span>${data.three}户</span></p>
                   <p><span>特殊食品主体 : </span><span>${data.two}户</span></p>
               </div>
            `;
            return context;
          }
        },
        series: [
          {
            type: "map",
            map: "pingtan",
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A" //鼠标进入时的颜色
              }
            },
            data: this.listArr
          }
        ]
      };
    },
    getData() {
      // 获取城市名称数据
      // console.log("取到的pingtan的json数据", pingtan);
      if (pingtan) {
        let arr = pingtan.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          this.max = arr[0].id;
          this.min = arr[0].id;
          if (arr[j].id > this.max) {
            this.max = arr[j].id;
          }
          if (arr[j].id < this.min) {
            this.min = arr[j].id;
          }
          this.listArr.push({
            name: arr[j].properties.name,
            value: arr[j].id
          });
        }
      }
    },
    initCharts() {
      echarts.registerMap("pingtan", pingtan);
      this.chart = echarts.init(document.getElementById("mapChart"));
      this.chart.setOption(this.options);
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}
.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.buttom {
  width: 200px;
  margin: 20px;
}
.item {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
#mapChart {
  width: 400px;
  height: 43vh;
}
</style>
